﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>RGBA filter demo</title>
    <!-- Not done yet... -->
    <link rel="stylesheet" href="ui.css" />
    <script src="ImageFilter.js"></script>
    <script src="RGBAFilter.js"></script>
    <script>
        (function () {
            "use strict";
            var d = document, f = function (x) { return d.getElementById(x) };
            if (d.addEventListener) {
                d.addEventListener("DOMContentLoaded", function () {
                    var uploader = f("uploader"), loadersForm = f("loaders"),
                     canvas = f("draw"), context = canvas.getContext("2d"),
                     tabs = [f("rgba"), f("other")], panelbox = f("panels"),
                     panelsArr = Array.prototype.slice.call(panelbox.querySelectorAll("[data-for]")),
                     image = new Image();
                    image.onload = function () {
                        var w = image.width, iw = window.innerWidth > 530 ? innerWidth - 30 : 500;
                        canvas.width = w > iw ? iw : w;
                        canvas.height = image.height;
                        context.drawImage(image, 0, 0);
                    };
                    loadersForm.addEventListener("submit", function (ev) {
                        if (!window.FileReader || !uploader.value) {
                            ev.preventDefault();
                            return;
                        }
                        var fr = new FileReader();
                        try {
                            fr.readAsDataURL(uploader.files[0]);
                            fr.onload = function (e) {
                                var src = e.target.result;
                                image.src = src;
                            };
                        } catch (e) { console.log(e); }
                        ev.preventDefault();
                    }, false);
                    tabs.bind = function (e, f) {
                        this.forEach(function (cur, i) {
                            cur.addEventListener(e, f, false);
                        });
                    };
                    tabs.bind("click", function (e) {
                        for (var i = 0; i < tabs.length; i++) {
                            tabs[i].className = "";
                        }
                        this.className = "on";
                        panelsArr.forEach(function (panel) { panel.style.display = "none"; });
                        var cur = panelbox.querySelector("[data-for=" + this.id + "]");
                        if (cur) { cur.style.display = "block"; }
                        e.preventDefault();
                        e.stopPropagation();
                    });
                    function ShowOverlay(x) {
                        if (!x) return;
                        var s = x.style;
                        s.visibility = "visible";
                        s.opacity = 1;
                    }
                    function HideOverlay(e) {
                        var s = this.style;
                        if (e.target != this) return;
                        s.opacity = 0;
                        s.visibility = "hidden";
                    }
                    var fCreator = f("filtercreator");
                    f("creatergba").addEventListener("click", function (e) {
                        console.log(1);
                        ShowOverlay(fCreator);
                        e.preventDefault();
                    });
                    var CustFilters = {};
                    f("creatorform").addEventListener("submit", function (e) {
                        e.preventDefault();
                        var fName = f("filtername").value || "";
                        if (CustFilters[fName]) {
                            alert("Name used!");
                            return;
                        }
                        var fArgs = Array.prototype.slice.call(this.getElementsByTagName("input"), 1, 16).map(function (item) {
                            return +item.value;
                        });
                        CustFilters[fName] = new RGBAFilter(fArgs);
                        var cusLink = document.createElement("a");
                        cusLink.href = "#";
                        cusLink.innerHTML = fName || "[[Empty string]]";
                        cusLink.addEventListener("click", function (e) {
                            e.preventDefault();
                            CustFilters[fName].ApplyFilter(context, { sw: canvas.width, sh: canvas.height }, f("useseval").checked);
                        }, false);
                        f("yourrgbas").appendChild(cusLink);
                        // testing...
                    }, false);
                    fCreator.addEventListener("click", HideOverlay, false);
                    var demoFilters = [new RGBAFilter([.5, .5, 0, 0, .5, .5]),
                      new RGBAFilter([1 / 3, 1 / 3, 1 / 3, 0, 1 / 3, 1 / 3, 1 / 3, 0, 1 / 3, 1 / 3, 1 / 3]),
                      new RGBAFilter([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, .5])],
                     demoBtns = [f("my"), f("gs"), f("st")],
                     exportedImg = document.createElement("img"), resultDiv = f("result");
                    demoBtns.forEach(function (x, i) {
                        if (x) {
                            x.onclick = function () { demoFilters[i].ApplyFilter(context, { sw: canvas.width, sh: canvas.height }, f("useseval").checked); };
                        }
                    });
                    f("exportbn").addEventListener("click", function (ev) {
                        try {
                            exportedImg.src = canvas.toDataURL();
                            resultDiv.appendChild(exportedImg);
                        } catch (e) { console.log(e) }
                        ShowOverlay(resultDiv);
                        ev.preventDefault();
                    }, false);
                    resultDiv.addEventListener("click", HideOverlay, false);
                });
            }
        })();
    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Canvas</h1>
            <form class="loaders" id="loaders">
                You can <span class="upload">browse<input type="file" id="uploader" /></span> from file and
                <input type="submit" value="submit" class="submit" />. (Incompatible with IE 9 or below.)
            </form>
        </header>
        <div class="tabs">
            <a href="#" id="rgba" class="on">RGBA filters</a><a href="#" id="other">Other filters</a>
            <a href="#" id="exportbn" class="right">Export image</a>
            <label>
                <input type="checkbox" id="useseval" />Use eval</label>
        </div>
        <div id="panels" class="pbox">
            <div data-for="rgba" class="panel" style="display: block">
                <p id="yours">Your filters: <span id="yourrgbas"></span><a href="#" id="creatergba">Create one</a></p>
                <p>
                    Demo filters:
                    <button id="my">My RGBA filter</button>
                    <button id="gs">Grayscale</button>
                    <button id="st">Semi-transparent</button>
                </p>
            </div>
            <div data-for="other" class="panel">
                <p>Coming soon...</p>
            </div>
        </div>
        <div class="cbox">
            <canvas id="draw" width="570" height="570">
                <p>Your browser doesn't support canvas.</p>
            </canvas>
        </div>
    </div>
    <div class="overlay" id="result"></div>
    <div class="overlay" id="filtercreator">
        <form id="creatorform">
            <table>
                <tr>
                    <td colspan="4">
                        <input id="filtername" placeholder="Filter name..." /></td>
                </tr>
                <tr>
                    <td>
                        <input value="1" /></td>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="0" /></td>
                </tr>
                <tr>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="1" /></td>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="0" /></td>
                </tr>
                <tr>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="1" /></td>
                    <td>
                        <input value="0" /></td>
                </tr>
                <tr>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="0" /></td>
                    <td>
                        <input value="1" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Create one" /></td>
                    <td colspan="2">
                        <input type="reset" value="Reset" /></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
